<template>
  <div class="patient-overview">
    <section class="left-side">
      <div class="left-header">
        <span>病人总数<span style="font-size: 1vw; color: #629efb">45</span>人</span>
        <el-form inline>
          <el-form-item label="护士站：">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="护理项目：">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="床号：">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small">查询</el-button>
            <el-button type="success" size="small">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="left-content">
        <div v-for="({ category, total, beds }, index) in data" :key="index">
          <div class="category">
            <span>{{ category }}</span
            ><span>【{{ total }}】</span>
          </div>
          <div class="bed-num">
            <span v-for="(bed, i) in beds" :key="i">{{ bed }} </span>
            <!-- <span class="page"><span class="cont">1/1</span></span> -->
          </div>
        </div>
      </div>
    </section>
    <aside class="right-side">
      <div>
        <div class="title">
          <span
            :class="showDoctorOrPhone ? 'active' : ''"
            @click="showDoctorOrPhone = !showDoctorOrPhone"
            >值班医生</span
          ><span
            :class="!showDoctorOrPhone ? 'active' : ''"
            @click="showDoctorOrPhone = !showDoctorOrPhone"
            >联系电话</span
          >
        </div>
        <div class="doctor" v-show="showDoctorOrPhone">值班医生</div>
        <div class="phone" v-show="!showDoctorOrPhone">联系电话</div>
      </div>
      <div>
        <div class="title">
          <span
            :class="showBedOfNotice ? 'active' : ''"
            @click="showBedOfNotice = !showBedOfNotice"
            >换床信息</span
          ><span
            :class="!showBedOfNotice ? 'active' : ''"
            @click="showBedOfNotice = !showBedOfNotice"
            >特殊提醒</span
          >
        </div>
        <div class="change-bed" v-show="showBedOfNotice">换床信息</div>
        <div class="special-notice" v-show="!showBedOfNotice">特殊提醒</div>
      </div>
      <div>
        <div class="title"><span class="active">检查信息</span></div>
      </div>
      <div>
        <div class="title"><span class="active">友情提示</span></div>
      </div>
    </aside>
  </div>
</template>

<script setup>
import { ref } from "vue";

let date = ref();

let data = ref([
  {
    category: "入院病人",
    total: 45,
    beds: [
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      50,
      30,
      20,
      15,
      66,
      18,
      32,
      90,
      11,
      28,
      45,
      72,
      6,
      80,
      91,
      99,
      27,
      26,
      17,
      50,
      97,
      38,
    ],
  },
  {
    category: "神志瞳孔",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "转入",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "记出入量",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "转出",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "免记出入量",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "今日出院",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "心电监护",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "明日出院",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "PDD皮试",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "一级护理",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "血常规(末梢血)",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "今日手术",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "中心静脉管道护理",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "明日手术",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "PICC导管护理",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "病重",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "吸痰护理",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "病危",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "跌倒/跌倒风险提示",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "心率",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "留陪2人",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "禁食",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "吸氧高流量",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "卧床休息",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "吸氧中流量",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "鼻饲",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "吸氧低流量",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "雾化",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
  {
    category: "备氧",
    total: 45,
    beds: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
  },
]);

let showDoctorOrPhone = ref(true);
let showBedOfNotice = ref(true);
</script>

<style lang="scss" scoped>
.patient-overview {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left-side {
    flex: 5;
    background: #fff;
    border-radius: 10px;
    margin-right: 1vw;
    padding: 1vw;
    overflow-y: auto;
    /* 隐藏默认的滚动条样式 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    .left-header {
      display: flex;
      justify-content: space-between;
      :deep(.el-form) {
        .el-form-item__label,
        .el-button {
          font-size: 0.8vw;
        }
        .el-input {
          width: 10vw;
          height: 3vh;
        }
        .el-range-editor {
          height: 3vh;
          .el-range-input,
          .el-range-separator {
            font-size: 0.8vw;
          }
        }
        .el-date-editor.el-input__wrapper {
          width: 10vw;
        }
      }
      .el-form--inline .el-form-item {
        margin-right: 2vw;
      }
    }
    .left-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1vh 1.5vw;
      > div {
        position: relative;
        display: flex;
        justify-content: space-between;
        .category {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #619dfb;
          color: #fff;
          min-width: 10vw;
          border-radius: 5px;
          padding: 0 0.4vw;
        }
        .bed-num {
          display: grid;
          grid-auto-flow: column;
          gap: 0.2vw;
          background: #d2e8ff;
          padding: 0.2vh;
          border-radius: 5px;
          overflow-x: auto;
          /* 隐藏默认的滚动条样式 */
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */
          max-width: 28.5vw;

          > span {
            display: inline-block;
            border-radius: 5px;
            background: #fff;
            min-width: 2vw;
            height: 2.6vh;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .page {
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background: #d2e8ff;
            border-radius: 0;
            color: #619dfb;
            border-radius: 0 5px 5px 0;
            .cont {
              width: 1.2vw;
              border-radius: 50%;
              text-align: center;
              font-size: 0.6vw;
              padding: 0.2vh 0;
              border: 1px solid #619dfb;
            }
          }
        }
        .bed-num::-webkit-scrollbar {
          display: none; /* Chrome, Safari, and Opera */
        }
      }
    }
  }
  .left-side::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
  .right-side {
    flex: 1;
    display: grid;
    grid-auto-flow: row;
    gap: 1vw;
    > div {
      background: #fff;
      border-radius: 10px;
      padding: 0px 10px;
      .title {
        padding: 5px 10px;
        display: flex;
        > span {
          margin-right: 20px;
        }
      }
    }
    .active::after {
      display: block;
      content: "";
      width: 2em;
      height: 2px;
      background: #619dfb;
      margin-top: 2px;
      margin-left: 1em;
    }
  }
}
</style>
